<template>
	<view class="add-invoice">
		<view class="tabs flex">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="tabIndex = 0">电子普通发票</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="tabIndex = 1">专用发票</view>
		</view>
		<form @submit='submitForm'>
			<!-- 电子普通发票 -->
			<view v-if="tabIndex == 0">
				<view class="title">发票详情（必填）</view>
					<view class="list flex-between">
						<view class="label">抬头类型</view>
						<view class="right flex">
							<label class="radio" @click="radioType = 0">
								<radio :checked="radioType == 0" style="transform:scale(0.7)" />企业</label>
							<label @click="radioType = 1" class="radio">
								<radio :checked="radioType == 1" style="transform:scale(0.7)" />个人/非企业性质单位</label>
						</view>
					</view>
					<view class="list flex-between">
						<view class="label">发票抬头</view>
						<view class="right">
							<input type="text" name="param1" placeholder="请填写发票抬头">
						</view>
					</view>
					<view class="list flex-between" v-if="radioType == 0">
						<view class="label">纳税人识别号</view>
						<view class="right">
							<input type="text" name="param2" placeholder="请输入纳税人识别号">
						</view>
					</view>
					<view class="list flex-between">
						<view class="label">电子邮件</view>
						<view class="right">
							<input type="text" name="param3" placeholder="前填写电子邮件地址">
						</view>
					</view>
					<view class="title">其他信息（非必填）</view>
					<view class="list flex-between">
						<view class="label">开户银行</view>
						<view class="right">
							<input type="text" name="param4" placeholder="前填写开户银行">
						</view>
					</view>
					<view class="list flex-between">
						<view class="label">银行账号</view>
						<view class="right">
							<input type="text" name="param5" placeholder="前填写银行账号">
						</view>
					</view>
					<view class="list flex-between">
						<view class="label">地址</view>
						<view class="right">
							<input type="text" name="param6" placeholder="前填写地址">
						</view>
					</view>
					<view class="list flex-between">
						<view class="label">电话</view>
						<view class="right">
							<input type="text" name="param7" placeholder="前填写电子电话">
						</view>
					</view>
				
			</view>
			<!-- 专用发票 -->
			<view v-if="tabIndex == 1">
			<view class="title">发票详情（必填）</view>
				<view class="list flex-between">
					<view class="label">发票抬头</view>
					<view class="right">
						<input type="text" name="param1" placeholder="请填写发票抬头">
					</view>
				</view>
				<view class="list flex-between">
					<view class="label">纳税人识别号</view>
					<view class="right">
						<input type="text" name="param2" placeholder="请输入纳税人识别号">
					</view>
				</view>
				
				<view class="title">其他信息（必填）</view>
				<view class="list flex-between">
					<view class="label">开户银行</view>
					<view class="right">
						<input type="text" name="param3" placeholder="前填写开户银行">
					</view>
				</view>
				<view class="list flex-between">
					<view class="label">银行账号</view>
					<view class="right">
						<input type="text" name="param4" placeholder="前填写银行账号">
					</view>
				</view>
				<view class="list flex-between">
					<view class="label">注册地址</view>
					<view class="right">
						<input type="text" name="param5" placeholder="前填写地址">
					</view>
				</view>
				<view class="list flex-between">
					<view class="label">注册电话</view>
					<view class="right">
						<input type="text" name="param6" placeholder="前填写电子电话">
					</view>
				</view>
			<view class="title">收件信息（必填）</view>
			<view class="list flex-between">
				<view class="label">联系人</view>
				<view class="right">
					<input type="text" name="param7" placeholder="前填写联系人姓名">
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">联系电话</view>
				<view class="right">
					<input type="text" name="param8" placeholder="前填写联系电话">
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">所在地区</view>
				<view class="right">
					<input type="text" disabled @click="showMulLinkageThreePicker" v-model="pickerText" name="param9" placeholder="点击选取地区">
				</view>
			</view>
			<view class="list flex-between">
				<view class="label">详细地址</view>
				<view class="right">
					<input type="text" name="param10" placeholder="前填写详细地址">
				</view>
			</view>
						
		</view>
				<view class="footer flex-center">
					<button class="btn flex-center">提交</button>
				</view>
		</form>
		  <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	 import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	    // https://github.com/zhetengbiji/mpvue-citypicker
	    import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	    import cityData from '@/common/city.data.js';
	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				tabIndex: 0,
				radioType: 0,
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				 themeColor: '#007AFF',
				 pickerText:''
			};
		},
		methods: {
			// 表单提交
			submitForm(e){
				console.log(e)
			},
		  // 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = e.label
				console.log(this.pickerText)
			}
		}
	}
</script>

<style lang="less">
	@main-color: #039702;

	.tabs {
		background: white;
		padding: 0 30rpx;

		view {
			width: calc(100% / 2);
			height: 70rpx;
			font-size: 30rpx;
			color: #999;

			&.active {
				color: @main-color;
				position: relative;

				&::after {
					content: "";
					display: block;
					width: 60rpx;
					height: 4rpx;
					position: absolute;
					bottom: 0;
					background: @main-color;
					left: calc(50% - 30rpx);
				}
			}
		}
	}

	.title {
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		color: #777;
	}

	.list {
		padding: 0 30rpx;
		background: white;
		height: 70rpx;

		.label {
			font-size: 28rpx;
		}

		input {
			text-align: right;
			font-size: 28rpx;
		}

		.radio {
			margin-left: 30rpx;
			font-size: 26rpx;
		}
	}
	.footer{
		height: 100rpx;
		background: white;
		width: 100vw;
		position: fixed;
		bottom:0;
		left: 0;
		button{
			width: 690rpx;
			height: 70rpx;
			background: @main-color;
			font-size: 28rpx;
			color:#fff;
			border-radius: 35rpx;
		}
	}
</style>
